<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue的事件绑定</title>
    <script src="../../assets/vue.js"></script>
</head>
<body>
    <div id="root">
        <button v-on:click="increase">+</button>
        <span>{{ count }}</span>
        <button v-on:click="reduce">-</button>
        <!---->
        <!--<h3>修饰符</h3>-->
        <!--&lt;!&ndash; 方法处理器 &ndash;&gt;-->
        <!--<button v-on:click="clickMe"></button>-->
        <!--&lt;!&ndash; 对象语法 （v2.4.0版本以上才支持） &ndash;&gt;-->
        <!--<button v-on="{ mousedown: doThis, mouseup: doThat}"></button>-->
        <!--&lt;!&ndash; 内联语句 &ndash;&gt;-->
        <!--<button v-on:click="doThat('Hello', $event)"></button>-->
        <!--&lt;!&ndash; 缩写 &ndash;&gt;-->
        <!--<button @click="doThis"></button>-->
        <!--&lt;!&ndash; 停止冒泡 &ndash;&gt;-->
        <!--<button @click.stop="doThis"></button>-->
        <!--&lt;!&ndash; 阻止默认行为 &ndash;&gt;-->
        <!--<button @click.prevent="doThis"></button>-->
        <!--&lt;!&ndash; 阻止默认行为， 没有表达式 &ndash;&gt;-->
        <!--<form @submit.prevent></form>-->
        <!--&lt;!&ndash; 串联修饰符 &ndash;&gt;-->
        <!--<button @click.stop.prevent="doThis"></button>-->
        <!--&lt;!&ndash; 键修饰符， 键别名 &ndash;&gt;-->
        <!--<input @keyup.13="onEnter" />-->
        <!--&lt;!&ndash; 点击回调只会触发一次 &ndash;&gt;-->
        <!--<button v-on:click.once="doThis"></button>-->
    </div>

    <script>
        new Vue({
            el: '#root',
            data: {
                count: 0
            },
            methods: {
                increase: function() {
                    this.count++
                },
                reduce: function() {
                    this.count--
                }
            }
        })
    </script>
</body>
</html>